<template>
  <section class="banner">
    <figure class="banner-inner">
      <el-page-header @back="goBack">
        <template slot="content">
          <div class="title">
            <h2 class="title-text" v-if="isShowTitleText">{{title}}</h2>
            <el-input
              placeholder="请输入关键字搜索图标"
              v-model="keywords"
              class="input-with-select"
              v-if="isShowSearch"
            >
              <el-select
                v-model="searchIconsSelect"
                slot="prepend"
                placeholder="请选择"
                style="width:130px;"
                @change="selectItem()"
              >
                <el-option v-for="(item,index) in categoryList" :key="index" :label="item" :value="item"></el-option>

                <!-- <el-option label="remixicon" value="1"></el-option>
                <el-option label="iconfont" value="2"></el-option>
                <el-option label="material.io" value="3"></el-option> -->
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <p class="title-control" v-if="isShowControl">
              <el-button
                icon="el-icon-thumb"
                size="small"
                @click="likePicture"
              >{{picture.like_num}}赞</el-button>
              <el-button icon="el-icon-star-off" size="small" @click="goCollect">{{picture.collect_num}}收藏</el-button>
            </p>
          </div>
        </template>
      </el-page-header>
    </figure>
  </section>
</template>

<script>
export default {
  name: "BannerInDetail",
  props: {
    isShowTitleText: Boolean,
    title: String,
    isShowControl: Boolean,
    isShowSearch: Boolean,
    picture: Object,
    categoryList:Array
  },
  data() {
    return {
      backImage:'',
      styleObject: {
          // "background-image": `url(${this.picture!==null ? "/api/base/get-shot?img=" +this.picture.img_thumbnail  : "/images/top_banner_bg.jpg"})`,
          "background-image": `url("/images/top_banner_bg.jpg")`,
          "background-size": 'cover',
          "background-repeat": 'no-repeat',
          'background-origin':'content-box'
          // "background-position": 'top'
        },
      keywords: "",
      searchIconsSelect: "All"
    };
  },
  watch: {
    keywords(val, newval) {
      this.$parent.searchIcons(this.keywords)
    }
  },
  methods: {
    selectItem(){
      this.$emit("toPosition",this.searchIconsSelect)
    },
    // 收藏方法
    goCollect(){
      this.$parent.collect()
    },
    // 点赞图片
    likePicture() {
      if (window.sessionStorage.getItem("tuyibo_userid") != null) {
        var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
        this.$axios.post("/api/web/likePicture", {
          uid: data.userid,
          image_id: this.picture.id
        }).then(res=>{
          if(res.data.code==-1){
            this.$message.info(res.data.msg);
            this.picture.like_num=this.picture.like_num-1
          }else{
            this.$message.success(res.data.msg)
            this.picture.like_num=this.picture.like_num+1
          }
        })
        .catch(err=>{
          console.log(err)
        })
      } else if( window.loginbox ){
          window.loginbox.show = true
        }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.banner {
  padding-top: 60px;
  background: url("../assets/images/banner.jpg") center center / cover no-repeat;
  margin-bottom: 54px;
  .banner-inner {
    padding: 0 16px;
    max-width: 1380px;
    margin: 0 auto;
    .el-page-header {
      padding: 24px;
      background-color: @white;
      position: relative;
      bottom: -24px;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
      /deep/.el-page-header__left {
        display: flex;
        align-items: center;
      }
      /deep/.el-page-header__content {
        flex: 1;
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .title-text {
    font-size: 34px;
    line-height: 1;
    flex: 1;
    margin-right: 24px;
  }
}
</style>
